<template>
  <div class="navigation homenav-box">
      <div class="HomePagelogo" :style="{background: 'url('+require('@/assets/hx-logo.png')+')'}" @click="handleIntoHome"></div>
      <ul class="user-control">
          <li>
              <img src="@/assets/pending-blue.png" alt="">
              <a-badge :count="waitingCount" :offset=[2,-2] :numberStyle="userControlStyle">
                  <router-link to="/workReport/awaitingapproval"><p>待审批</p></router-link> 
              </a-badge>
          </li>
          <li>
              <img src="@/assets/backlog.png" alt="">
              <a-badge :count="todolistCount" :offset=[2,-2] :numberStyle="userControlStyle">
                  <router-link to="/workReport/todolist"><p>待办</p></router-link>
              </a-badge>
          </li>
          <li>
              <img src="@/assets/canlendar.png" alt="">
              <a-badge :count="userData.badgecount?userData.badgecount:calendarCount" :offset=[2,-2] :numberStyle="userControlStyle">
                  <router-link to="/workReport/calendarpage"><p>日历</p></router-link>
              </a-badge>
          </li>
          <li>
              <img src="@/assets/appointment.png" alt="">
              <a-badge :count="myreservationCount" :offset=[2,-2] :numberStyle="userControlStyle">
                  <router-link target="_blank" to="/myreservation"><p>我的预约</p></router-link>
              </a-badge>
          </li>
          <li>
              <img src="@/assets/taskList/task.png" alt="">
              <a-badge :count="mytaskCount" :offset=[2,-2] :numberStyle="userControlStyle">
                  <router-link target="_blank" to="/task"><p>我的任务</p></router-link>
              </a-badge>
          </li>
      </ul>
      <ul class="user-facility">
          <li v-show="userData.module!='home'" @click="handleIntoHome">
              <span>首页</span>
          </li>
          <!-- <li v-show="userData.module!='home'">
              <img src="@/assets/advice.png" alt="" width="15" height="18">
              <a-badge :count="1" :offset=[5,-5] :numberStyle="userControlStyle">
                <span>通知</span>
              </a-badge>
          </li> -->
          <li @click="handleIntoDownload" v-has="'mainData:projectContractMould:index'" >
              <img src="@/assets/download.png" alt="">
              <span>模板</span>
          </li>
          <li @click="handleIntoBackground" v-has="'main:backstage'">              
              <img src="@/assets/setting.png" alt="">
              <span>后台</span>              
          </li>
          <li v-has="'reportCentent:index'">
                <router-link to="/reportCenter" target="_blank">                            
                    <a-icon type="bar-chart" />
                    <span>报表中心</span>
                </router-link>              
          </li>
          <li @click="handleIntoMyProfile">
              <img src="@/assets/user.png" alt="">
              <span>{{ userData.info.realname }} 个人中心</span>
          </li>
      </ul>
          
    <template>
        <div class="user-more">
            <div v-show="userData.module!='home'" @click="handleIntoHome" class="mpng">
                <a-icon type="home" />
                <span>首页</span>
            </div>
            <a-dropdown placement="bottomRight" class="user-dropdown">
                <div @click="e => e.preventDefault()" class="menu-btn">  
                    <span class="burger-line"></span>              
                    <span>{{ userData.info.realname }}</span>
                </div>
                <a-menu slot="overlay" style="padding: 0">
                    <!-- <a-menu-item v-show="userData.module!='home'">
                        <div  @click="handleIntoHome">
                            <img src="@/assets/home.png" alt="">
                            <span>首页</span>
                        </div>
                    </a-menu-item> -->
                    <a-menu-item  v-has="'mainData:projectContractMould:index'">
                        <div @click="handleIntoDownload" >
                            <img src="@/assets/download.png" alt="">
                            <span>模板</span>
                        </div>
                    </a-menu-item>
                    <a-menu-item v-has="'main:backstage'">
                        <div @click="handleIntoBackground" >
                            <img src="@/assets/setting.png" alt="">
                            <span>后台</span>
                        </div>
                    </a-menu-item>                    
                    <a-menu-item v-has="'reportCentent:index'">
                        <router-link to="/reportCenter" target="_blank">                            
                            <a-icon type="bar-chart" />
                            <span>报表中心</span>
                        </router-link>
                    </a-menu-item>
                    <a-menu-item v-has="'main:backstage'">
                        <div @click="handleIntoMyProfile" >
                            <img src="@/assets/user.png" alt="">
                            <span>个人中心</span>
                        </div>
                    </a-menu-item>
                </a-menu>
            </a-dropdown>
        </div>    
    </template>

    <FullCalendar v-show="false" :options="calendarOptions"/>
  </div>
</template>

<script>
import Vue from 'vue'
import {getAction} from '@/api/manage'
import { ACCESS_TOKEN } from "@/store/mutation-types"
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import zhCn from '@fullcalendar/core/locales/zh-cn';
import '@fullcalendar/core/vdom' // solves problem with Vite
import store from '@/store'
export default {
  components:{
    FullCalendar
  },
  name:'HomeNav',
  props: {
    userData:Object,
  },
  data () {
    return {
        userControlStyle:{
            backgroundColor:'#ff745d',
            height:'15px',
            lineHeight:'15px'
        },
        url:{
            getTodoList:'/home/queryToHandle',
            getMyreservationList:'/home/queryToAppointment',
            getCalendarpageData:'/home/getCalendarpageData',
            loadData:'/home/pendingApprovalList',
            taskData:'/projectWorkTask/queryHomeNavSum',
            getHomeNavNumber:'/home/getHomeNavNumber',
            syncProcessInfo:'home//syncProcessInfo',
            codeInfo: '/manage/codeInfo/list',
        },
        todolistCount:'',
        waitingCount:'',
        calendarCount:'',
        myreservationCount:'',
        mytaskCount: '',
        startDate:'',
        endDate:'',
        calstartDate:'',
        calendDate:'',
        calendarOptions: {
            default: 'standard',
            locale: zhCn,
            plugins: [ dayGridPlugin, timeGridPlugin, interactionPlugin ],
            initialView: 'dayGridMonth',
            events: (start,end,callback)=>{
                this.calstartDate=start.startStr.split('T')[0]
                this.calendDate=start.endStr.split('T')[0]
                return ''
            },
            defaultAllDay:false,
            
            dayMaxEventRows: true, // for all non-TimeGrid views
            views: {
                timeGrid: {
                    dayMaxEventRows: 5,
                },
            },
            weekends: true,
            // contentHeight:500,
            aspectRatio:2,
            handleWindowResize:true,
            lazyFetching : true,
            headerToolbar: {
                left: 'today prev,next', // will normally be on the left. if RTL, will be on the right
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay', // will normally be on the right. if RTL, will be on the left
            },
       },
        processTimer:null,

    }
  },
  created(){
    this.getProcessInfo()
  },
  mounted () {
    //this.getCurrentTime()
    this.getTipsCount()
  },
  methods: {
    getTipsCount(){
        // getAction(this.url.getTodoList,{pageSize:-1,pageNo:1,status:3,column:"submitTime",order:"desc"}).then(res=>{
        //     if(res && res.result){
        //         this.todolistCount=res.result.total
        //     }
        // })
        // const _this = this
        // getAction(this.url.loadData,{status:0,notifyStatus:0,keyWord:''}).then(res=>{
        //     if(res && res.result){
        //         this.waitingCount= res.result.total
        //         // 抄送
        //         getAction(_this.url.loadData,{status:3,notifyStatus:0,keyWord:''}).then(res=>{
        //             if(res && res.result){
        //                 _this.waitingCount= Number(_this.waitingCount) + res.result.total
        //             }                
        //         })
        //     }            
        // })
        // getAction(this.url.getCalendarpageData,{startDate:this.calstartDate,endDate:this.calendDate}).then(res=>{
        //     if(res && res.result){
        //         this.calendarCount=res.result.length||''
        //     }
        // })
        // getAction(this.url.getMyreservationList,{pageSize:-1,pageNo:1,status:0,column:"submitTime",order:"desc"}).then(res=>{
        //     if(res && res.result){
        //         this.myreservationCount=res.result.total
        //     }
        // })
        // getAction(this.url.taskData,{}).then(res=>{            
        //     this.mytaskCount=res.result
        // })

        // new code by dr 
        getAction(this.url.getHomeNavNumber,{type:'1',startDate:this.calstartDate,endDate:this.calendDate}).then(res=>{
            if(res && res.result){
                this.waitingCount=res.result
            }
        })
        getAction(this.url.getHomeNavNumber,{type:'2',startDate:this.calstartDate,endDate:this.calendDate}).then(res=>{
            if(res && res.result){
                this.todolistCount=res.result
            }
        })
        getAction(this.url.getHomeNavNumber,{type:'3',startDate:this.calstartDate,endDate:this.calendDate}).then(res=>{
            if(res && res.result){
                this.calendarCount=res.result
            }
        })
        getAction(this.url.getHomeNavNumber,{type:'4',startDate:this.calstartDate,endDate:this.calendDate}).then(res=>{
            if(res && res.result){
                this.myreservationCount=res.result
            }
        })
        getAction(this.url.getHomeNavNumber,{type:'5',startDate:this.calstartDate,endDate:this.calendDate}).then(res=>{
            if(res && res.result){
                this.mytaskCount=res.result
            }
        })
    },
    getCurrentTime(){
        let now = new Date();
        let fd = (new Date(now.getFullYear(), now.getMonth(),1).toLocaleDateString()).split('/')
        let fe = (new Date(now.getFullYear(), now.getMonth()+1, 0).toLocaleDateString()).split('/')
        let year=fd[0]
        let month=fd[1]<10?'0'+fd[1]:fd[1]
        let fday=fd[2]<10?'0'+fd[2]:fd[2]
        let eday=fe[2]<10?'0'+fe[2]:fe[2]
        this.startDate=[year,month,fday].join('-')
        this.endDate=[year,month,eday].join('-')
    },
    handleTips() {
      const h = this.$createElement;
      this.$info({
        title: 'Hello，该模块正在火热建设中，暂时未上线',
        // content: h('div', {}, [
        //   h('p', 'some messages...some messages...'),
        //   h('p', 'some messages...some messages...'),
        // ]),
        onOk() {},
      });
    },
    handleIntoBackground(){
        // this.$router.push({ path: "/dashboard/analysis" }).catch(()=>{
        //     console.log('登录跳转首页出错,这个错误从哪里来的')
        // })
        window.open(this.HTE_OLD_SERVER_URL+`/index/backstage?bootToken=${ Vue.ls.get(ACCESS_TOKEN)}`, "_blank");
    },
    handleIntoHome(){
        this.$router.push({path:'/homepage'})
    },
    handleIntoMyProfile() {
        this.$router.push({path:'/myProfile'})
    },
    handleIntoDownload(){
        window.open(this.HTE_OLD_SERVER_URL+`/projectContractMould/index?bootToken=${ Vue.ls.get(ACCESS_TOKEN)}`, "_blank");
    },
    getProcessInfo(){
      const vm = this
      let time = 1000 * 600
      let timePro = Math.abs(time - 8000) 
       vm.processTimer && window.clearInterval(vm.processTimer) 
      function startTimer(){
        var token = Vue.ls.get(ACCESS_TOKEN)
        var proInfo = Vue.ls.get('proInfo')
                  
        if(token && vm.userData && !!vm.userData.info.username && !proInfo){
            Vue.ls.set('proInfo','1',timePro)
            getAction(vm.url.syncProcessInfo,{username:vm.userData.info.username}).then(res=>{
              if(res && !res.success){
                vm.processTimer && window.clearInterval(vm.processTimer)
                console.log('清除同步流程定时任务')
              }
            }).catch(res=>{
                vm.processTimer && window.clearInterval(vm.processTimer)
                console.log('清除同步流程定时任务')
            
          })
        } 
      }
      //娅米浏览器监听visibilitychange失败
      function blurEven(){
        vm.processTimer && window.clearInterval(vm.processTimer)
      }
      function focusEven(){
        vm.processTimer && window.clearInterval(vm.processTimer)
        startTimer()
        vm.processTimer = window.setInterval( startTimer,time)
      } 
      window.removeEventListener("blur", blurEven,false);
      window.removeEventListener("focus", focusEven,false);
      getAction(this.url.codeInfo, { type:'同步流程中心数据' })
        .then((res) => {
          if (res.code == 200 && res.result.records.length>0) {
            let code = res.result.records[0].code
           
            if(code == 1){
                //code=1开始同步
                //定时时间秒
                if(!!res.result.records[0].parentid){
                  let times = isNaN(parseInt(res.result.records[0].parentid)) || parseInt(parseInt(res.result.records[0].parentid)) < 600 ? 600: parseInt(res.result.records[0].parentid)
                  time = 1000 * times
                  timePro = Math.abs(time - 8000) 
                }
                focusEven()
                window.addEventListener("blur", blurEven,false);
                window.addEventListener("focus", focusEven,false);
            }
          }
        })
    },
  },
  destroyed(){
    clearInterval(this.processTimer)
  }
}
</script>

<style lang="less" scoped>
.navigation{
    display: flex;
    justify-content: space-between;
    // height: 60px;
    background-color: #fff;
    padding:10px 125px;
    height: 66px;
    align-items:center;    
    ul{
      list-style: none;
    }
    .HomePagelogo{
        width: 188px;
        height: 46px;
        cursor: pointer;
        &:hover{
            opacity: 0.9;
        }
    }
    .user-control{
        display: flex;
        align-items: center;
        color: #4c85ab;
        margin: 0;
        padding: 0;
        >li{
            display: flex;
            align-items: center;            
            >img{
                width: auto;
                height: 20px;
            }
            a{
              color: inherit;
            }
            p{
                font-size: 13px;
                display: inline-block;
                margin: 0 4px;
                border-bottom: 1px solid transparent;
                cursor: pointer;
                height: 25px;
                padding-top: 8px;
                &:hover{
                    border-bottom: 1px solid rgba(76,133,171,.2);
                }
            }            
        }
    }
    ul.user-facility{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: 0;
        color: #767676;
        li{padding: 0 13px;
            >a{color: inherit;
                >i{font-size: 17px;margin-right: 5px;color: #767676;}
                >span{font-size: 13px;}
            }
            img{
                margin-right: 5px;
                width: 17px;vertical-align: sub;
            }
            &:last-child{
                margin-right: 0;
            }
            &:hover{color: #4c85ab;
               >a >i.anticon {color: rgba(0, 0, 0, 0.65)}
            }
            &:after{background:#999;width: 1px;margin-top: -6px;}
        }
    }
    .user-more{display: none;}
}
.user-more{
    >div{
        margin-left: 15px;
        &:hover{
            color: #189cf0;
        }
    }
    .mpng{
        i{font-size: 17px;margin-right: 2px;vertical-align: middle;}
        span{position: relative;top:2px}
    }
    .menu-btn{
        margin-top: 4px; 
        display: flex;
        align-items: center
    }
    .burger-line {
        transition: background .3s ease-in-out,width .3s ease-in-out;
        display: block;
        width: 17px;
        height: 2px;
        background: #636363;
        position: relative;
        border-radius: 2px;
        cursor: pointer;
        margin-right: 5px;
        &:after,&:before{content: '';position: absolute;transition: transform .3s ease-in-out,width .3s ease-in-out,background .3s ease-in-out;border-radius: inherit;
        background: #636363;height: inherit;}
        &:before{                                    
            right: 0;
            width: 75%;       
            top: 2px;                             
            transform: translateY(-8px);
        }
        &:after{
            left: 0;
            bottom: 2px;
            width: 100%;                    
            transform: translateY(8px);
        }
    }
    .user-dropdown{
        &:hover{
            .burger-line{
                background: #189cf0;
                &:before{
                    width: 100%;
                    background: #189cf0;
                }
                &:after{
                    width: 75%; 
                    background: #189cf0;
                }
            }
        }
    }    
}
.user-facility, .user-control{
    >li{position: relative;padding: 0 18px;cursor: pointer;font-size: 13px;
        &:after{
            content: '';position: absolute;right: 3px;top: 50%;height: 12px;margin-top:-3px;opacity: 0.5;background:#4c85ab;width: 1px;
        }
        &:last-of-type{
            &:after{display: none;}
        }
    }
}

.homenav-box{
    transition: display .3s;
}
/deep/ .ant-dropdown-menu-item{
    min-width: 110px;padding:5px 12px 9px;
    img{width: 16px;vertical-align: bottom;}
    span{padding-left: 10px;position: relative;top: 3px;}
    .anticon{font-size: 17px;vertical-align: middle;}
}
@media (max-width: 1450px){
  div.homenav-box {
    .user-more{display: flex;align-items: center;cursor: pointer;}
    .user-facility{display: none;} 
  }  
}
@media (max-width: 1280px){
  div.homenav-box {
    .HomePagelogo{width: 95px} 
  }  
}
@media (max-width: 1080px){  
  div.navigation{padding: 10px 30px}
}
@media (max-width: 850px){
  div.homenav-box {
    .HomePagelogo{display: none;} 
  }
}
</style>